<template>
    <section class="oragin_info_form">
      <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="组织名称">
                <el-input v-model="form.name" style="width: 380px;" v-if="type==='add'"></el-input>
                <el-input v-model="form.name" style="width: 380px;" v-if="type==='update'"></el-input>
                <span v-if="type==='detail'">{{this.form.name}}</span>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="form.code" style="width: 180px;" v-if="type==='add'"></el-input>
                <el-input v-model="form.code" style="width: 180px;" v-if="type==='update'"></el-input>
                <span v-if="type==='detail'">{{this.form.code}}</span>
            </el-form-item>

            <el-form-item label="状态">
                <el-radio-group v-model="form.radio1" v-if="type==='add'">
                    <el-radio-button :label="1" >启用</el-radio-button>
                    <el-radio-button :label="0" >禁用</el-radio-button>
                </el-radio-group>
            <el-radio-group v-model="form.radio1" v-if="type==='update'">
                <el-radio-button :label="1" >启用</el-radio-button>
                <el-radio-button :label="0" >禁用</el-radio-button>
            </el-radio-group>
                <span v-if="type==='detail'">{{this.form.state ? '是' : '否'}}</span>
            </el-form-item>

            <el-form-item label="类型">
                <el-checkbox-group v-model="form.checkList" v-if="type==='add'">
                  <el-checkbox :label="1" name="type" style="display: block;">请求方</el-checkbox>
                  <el-form-item label-width="100px" 
                        v-model="form.input1"
                    :label="'请求IP地址'+(Number(index)+1)"
                    v-for="(item,index) in form.input1"
                    style="margin-bottom: 15px;"
                  >
                        <el-input v-model="item.adress" style="width: 280px;"></el-input>
                        <i @click="addIp" class="el-icon-circle-plus-outline" v-if="index===form.input1.length-1"></i>
                      <i @click="delIp(index)" class="el-icon-circle-close-outline" 
                            v-if="index!=form.input1.length-1">
                        </i>
                  </el-form-item>
                  <el-checkbox :label="0" name="type" style="display: block;">服务方</el-checkbox>
                  <div class="" >
                  <el-form-item label-width="100px"
                      v-for="(item,index) in form.input2"
                        :label="'联系人'+(Number(index)+1)"
                        style="margin-bottom: 15px;"
                    >
                            <el-input v-model="item.name" style="width: 80px;"></el-input>
                            <span>电话{{Number(index)+1}}</span>
                            <el-input v-model="item.phone" style="width: 180px;"></el-input>
                            <i @click="addPhone" class="el-icon-circle-plus-outline" 
                                v-if="index===form.input2.length-1">
                            </i>
                            <i @click="delPhone(index)" class="el-icon-circle-close-outline" 
                                v-if="index!=form.input2.length-1">
                            </i>
                        </el-form-item>
                  </div>
                </el-checkbox-group>
              <el-checkbox-group v-model="form.checkList" v-if="type==='update'">
                  <el-checkbox label="请求方" name="type" style="display: block;"></el-checkbox>
                  <el-form-item label-width="100px"
                    :label="'请求IP地址'+(Number(index)+1)"
                     v-for="(item,index) in form.input1"
                     style="margin-bottom: 15px;"
                  >
                <el-input v-model="item.adress" style="width: 280px;"></el-input>
                <i @click="addIp" class="el-icon-circle-plus-outline" 
                        v-if="index===form.input1.length-1">
                    </i>
              <i @click="delIp(index)" class="el-icon-circle-close-outline" 
                        v-if="index!=form.input1.length-1">
                    </i>
                  </el-form-item>
                  <el-checkbox label="服务方" name="type" style="display: block;"></el-checkbox>
                  <div class="">
                  <el-form-item label-width="100px"
                      v-for="(item,index) in form.input2"
                        :label="'联系人'+(Number(index)+1)"
                        style="margin-bottom: 15px;"
                    >
                        <el-input v-model="item.name" style="width: 80px;"></el-input>
                        <span>电话{{Number(index)+1}}</span>
                        <el-input v-model="item.phone" style="width: 180px;"></el-input>
                        <i @click="addPhone" class="el-icon-circle-plus-outline" 
                                v-if="index===form.input2.length-1">
                            </i>
                        <i @click="delPhone(index)" class="el-icon-circle-close-outline" 
                                v-if="index!=form.input2.length-1">
                            </i>
                    </el-form-item>
                  </div>
              </el-checkbox-group>
              <span v-if="type==='detail'">{{this.form.type}}</span>
            </el-form-item>

      <el-form-item v-if="type==='add'">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="disappears">取消</el-button>
      </el-form-item>
      <el-form-item v-if="type==='update'">
        <el-button type="primary" @click="onSubmitUpdata">确定</el-button>
        <el-button @click="disappears">取消</el-button>
      </el-form-item>
    </el-form>
    </section>
</template>

<script>
    import {organizationDataExchangeListDetail,
            organizationDataExchangeAdd,
            organizationDataExchangeUpdata,
            organizationDataExchangeListSearch,
    } from '../../api/data-exchange-api.js'

    export default {
        props:{
        type: '',
        content: '',
            objid: {
                type: Number,
                default: 12
            },
            organization: Object
      },
        data() {
            return {
                form: {
                    name: '',
                    code: '',
                    type: '',
                    state: '',
                    radio1:"",
                    checkList:[],
                    input1:[
                        {
                          adress:''
                        }
                    ],
                    input2:[
                        {
                          name:'',
                          phone:'',
                        }
                    ],
                },
                ips: '',    //添加的IP地址
                contacts: ''    //添加的联系方式
            }
        },
        methods: {
            onSubmit() {
                organizationDataExchangeAdd({   //新增组织信息
                    requesterType: 1,   //区域选择
                    name: this.form.name,
                    producer: '',    //请求方，固定了值是1，如果它是请求方就写1，如果不是请求方传空值
                    status: this.form.radio1 ,
                    ips: this.ips,
                    contacts: this.contacts
                }).then(res => {
                    console.log(res);
                    this.listSearch();
                }).catch(error =>{
                    console.log(error);
                });
                this.disappears();
            },
            onSubmitUpdata(){     //组织信息更新
                organizationDataExchangeUpdata({
                    id: this.objid,    //必须要传id
                    requesterType: 1,
                    producerType: 1,
                    name: this.form.name,
                    status: this.form.radio1,
                    ips: this.ips,
                    contacts: this.contacts
                }).then(res => {
                    console.log(res);
                    this.listSearch();
                }).catch(error =>{
                    console.log(error);
                })
                this.disappears();
            },
            listSearch(){
                organizationDataExchangeListSearch(this.organization).then(res => {
                    const result = res.data.data.list;
                    const tableData = [];
                    for(let i=0 ; i < result.length; i++ ){
                        let obj = {};
                        let resultType = '';
                        let resultState = '';
                        if(result[i].producerType == 1){
                            resultType = '服务方'
                        }else if(result[i].producerType == 0){
                            resultType = '请求方'
                        }else{
                            resultType = '服务方/请求方'
                        }
                        resultState = result[i].status ? '是' : '否';
                        obj.code = result[i].id;
                        obj.oragion = result[i].name;
                        obj.type = resultType;
                        obj.state = resultState;
                        tableData.push(obj);
                        // console.log(obj);
                        this.$emit('tableDataSub',tableData)
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            addIp(){/*请求IP地址增加*/
                this.form.input1.push({address:''});
                console.log(this.form.input1);
            },
            addPhone(){    //添加服务方联系方式
                this.form.input2.push({name:'',phone:''});
            },
            delPhone(index){
                this.form.input2.splice(index,1);
            },
            delIp(index){
                this.form.input1.splice(index,1);
            },
            disappears(){
                this.$emit('disappear', false);
            },
            listDetail(param){
                organizationDataExchangeListDetail({},param).then( res => {   //组织信息列表详细内容
                    const forms = res.data.data
                    this.form.name = forms.name
                    this.form.code = forms.id
                    this.form.type = forms.producerType
                    this.form.state = forms.status
                }).catch(error => {
                    console.log(error)
                });
            },
            formTypeChange(){   //类型更新
                setTimeout(()=>{
                    if(this.form.type == 1){
                        this.form.type = '服务方'
                    }else if(this.form.type == 0){
                        this.form.type = '请求方'
                    }else{
                        this.form.type = '服务方/请求方'
                    }
                },100);
            }
        },
        watch: {
            objid: function(newval,oldval) {
                //解决详细内容第一次不更新问题
                if(newval == 0){
                    this.listDetail(oldval);
                    this.formTypeChange();
                }else{
                    this.listDetail(newval);
                    this.formTypeChange();
                }
            },
            'form.checkList': {
                handler(newName, oldName) {
                    console.log(newName);
                },
                immediate: true,
                // deep: true
            },
            'form.input1': {
                handler(newName, oldName){
                    //计算ips的值
                    let result;
                    for(let i = 0; i < newName.length; i++){
                        if(newName[i].adress != undefined){
                            result += newName[i].adress+','
                            let end = result.slice(9);
                            this.ips = end;
                            console.log(end);
                        }
                    }
                }
            },
            'form.input2': {
                handler(newName, oldName){
                    //计算contacts的值
                    console.log(newName);
                    let result;
                    for(let i = 0; i < newName.length; i++){
                        result += newName[i].name + ',' + newName[i].phone +';'
                        let end = result.slice(9);
                        this.contacts = end;
                        console.log(end)
                    }
                }
            }
        },
        computed: {

        },
        mounted(){

        },
        created(){
            this.objid = 0;    //解决详细内容第一次不更新问题
        }
    }
</script>

<style >
    .oragin_info_form .title{
      font-size: 20px;
      margin-bottom: 10px;
    }
    .oragin_info_form .el-checkbox+.el-checkbox{
      margin-left: unset;
    }
    .oragin_info_form .el-icon-circle-plus-outline,.oragin_info_form .el-icon-circle-close-outline{
      font-size: 24px;
      vertical-align: middle;
      margin-left: 10px;
      color: #b3d3fb;
    }
</style>
